<template>
  <div class="dashboard-container">
    <cm-card class="box-card">
      <div slot="header" style='padding:0 10px;'>
        <span>合同台账查询</span>
      </div>
      <div class="text">
        <cm-row>
          <cm-form :inline="true">
            <cm-form-item label="编号/流水号">
              <cm-input placeholder="" size='mini' suffix-icon='cm-icons-search'></cm-input>
            </cm-form-item>
            <cm-form-item label="承办单位">
              <cm-input placeholder="" size='mini' suffix-icon='cm-icons-search'></cm-input>
            </cm-form-item>
            <cm-form-item label="承办部门">
              <cm-input placeholder="" size='mini' suffix-icon='cm-icons-search'></cm-input>
            </cm-form-item>
            <cm-form-item label="承办人">
              <cm-input placeholder="" size='mini' suffix-icon='cm-icons-search'></cm-input>
            </cm-form-item>
          </cm-form>
        </cm-row>
        <template v-if="isShow">
          <cm-row>
            <cm-form :inline="true">
              <cm-form-item label="我方主体">
                <cm-select v-model="value" size="mini" placeholder="请选择">
                  <cm-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
              <cm-form-item label="相对方名称">
                <cm-input placeholder="" size='mini'></cm-input>
              </cm-form-item>
              <cm-form-item label="合同性质">
                <cm-select v-model="value" size="mini" placeholder="请选择">
                  <cm-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </cm-option>
                </cm-select>
              </cm-form-item>
              <cm-form-item label="合同类型">
                <cm-input placeholder="" size='mini' suffix-icon='cm-icons-search'></cm-input>
              </cm-form-item>
            </cm-form>
          </cm-row>
          <cm-row>
            <cm-form :inline="true">
              <cm-form-item label="起草时间">
                <cm-date-picker
                  v-model="value7"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </cm-date-picker>
              </cm-form-item>
              <cm-form-item label="审批完成时间">
                <cm-time-picker
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </cm-time-picker>
              </cm-form-item>
              <cm-form-item label="生效时间">
                <cm-time-picker
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </cm-time-picker>
              </cm-form-item>
            </cm-form>
          </cm-row>
        </template>
        <cm-row type="flex" class="row-bg" justify="end">
          <cm-col :span="6"></cm-col>
          <cm-col :span="6">
            <more class="showOrHide" @toggleClick="isShow = !isShow"></more>
          </cm-col>
          <cm-col :span="6">
            <div class='btns'>
              <cm-button type='primary'>查询</cm-button>
              <cm-button type="default">重置</cm-button>
            </div>
          </cm-col>
        </cm-row>
        <cm-row>

        </cm-row>
      </div>
    </cm-card>

    <cm-card class="box-card">
      <div slot="header" style='padding:5px 10px 0 0;'>
        <span>查询结果</span>
        <cm-button class='btn' type="default" style='float:right'>删除</cm-button>
        <cm-button class='btn' type="primary" style='float:right;margin-right:10px;'>导出</cm-button>
        <cm-button class='btn' type="primary" @click="create" style='float:right;'>新建</cm-button>
      </div>
      <div class="text">
        <cm-table
          :data="tableData"
          border
          style="width: 100%">
          <cm-table-column :key='index' v-for='(item,index) in titles'
                           :prop="`text`+index"
                           :label="item.title" :width='item.width'>
          </cm-table-column>

        </cm-table>
        <cm-row class="page-block" type="flex" justify="end">
          <cm-pagination
            small
            layout="prev, pager, next, jumper"
            :total="50">
          </cm-pagination>
        </cm-row>
      </div>
    </cm-card>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import data from '@/data.json'
  import more from '@/components/More/index.vue'

  export default {
    name: 'Dashboard',
    data() {
      return {
        isShow:false,
        value7:'',
        value:'',
        titles: [
          {title: '序号', width: 80},
          {title: '合同流水号'},
          {title: '合同名称'},
          {title: '合同编号'},
          {title: '含税金额'},
          {title: '相对方名称'},
          {title: '承办单位'},
          {title: '承办部门'},
          {title: '承办人'}
        ],
        tableData: data,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]
      }
    },
    methods: {
      create(){
        this.$router.push({ path: '/create'})
      }

    },
    computed: {
      ...mapGetters(['name', 'roles'])
    },
    components: { more }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box-card {
    margin-bottom: 20px;
    .header {
      display: flex;
      justify-content: space-between;
    }
    .btns {
      display: flex;
      justify-content: flex-end;
    }
    .showOrHide{
      font-size: 14px;
      color: #bbb;
      font-weight: bold;
      cursor: pointer;
    }
  }
  .page-block{
    padding-top: 15px;
  }
</style>
